<template>
    <div class="home">
        <!-- 标题 -->
        <div class="title">
            <span>首页</span>
        </div>
        <!-- 邀请好友主图 -->
        <div>
            <img src="../img/homepage_friends.webp" class="master_picture">
        </div>
        <div class="users_orders">
            <!-- 用户信息 -->
            <div class="user">
                <div class="user_img_box">
                    <img :src="src" class="user_img">
                </div>
                <div class="user_info">
                    <span class="user_name">{{ user_name }}</span>
                    <span class="user_status">{{ occupancy }}</span>
                </div>
                <div style="margin-top: 45px;">
                    <img src="../img/ok.png" style="width: 14px;margin-right: 5px;">
                    <span class="time">开始时间至结束时间</span>
                </div>
            </div>
            <!-- 收益、销量 -->
            <div class="income_sales">
                <div style="margin-top: 15px;">
                    <span class="money_symbol">￥</span>
                    <span class="income">{{ incom }}</span><br>
                    <span>总收益</span>
                </div>
                <div style="margin-top: 15px;">
                    <span class="income">{{ nums }}</span><br>
                    <span>总销量</span>
                </div>
                <div style="margin-top: 15px;">
                    <span class="income">{{ favorable_rate }}</span><br>
                    <span>用户评分</span>
                </div>
            </div>
            <!-- 订单数据 -->
            <div class="orders">
                <div @click="statistics">
                    <span class="order_title">订单数据</span>
                    <span class="orders_all">查看详情 ></span>
                </div>
                <div class="order_data">
                    <div style="margin-top: 15px;">
                        <span class="money_symbol">￥</span>
                        <span class="income">{{ allincome }}</span><br>
                        <span>订单收入</span>
                    </div>
                    <div style="margin-top: 15px;">
                        <span class="income">{{ allnums }}</span><br>
                        <span>总订单数</span>
                    </div>
                    <div style="margin-top: 15px;">
                        <span class="money_symbol">￥</span>
                        <span class="income">{{ refund_amount }}</span><br>
                        <span>退款金额</span>
                    </div>
                </div>
            </div>
            <!-- 订单管理 -->
            <div class="orders">
                <div @click="gotoorders">
                    <span class="order_title">订单管理</span>
                    <span class="orders_all">查看全部 ></span>
                </div>
                <div class="order_data">
                    <div style="margin-top: 15px;">
                        <span class="income">{{ await_complete }}</span><br>
                        <span>待完成</span>
                    </div>
                    <div style="margin-top: 15px;">
                        <span class="income">{{ already_complete }}</span><br>
                        <span>已完成</span>
                    </div>
                    <div style="margin-top: 15px;">
                        <span class="income">{{ already_evaluate }}</span><br>
                        <span>已评价</span>
                    </div>
                </div>
            </div>
            <!-- 今日订单 -->
            <div style="margin-bottom: 100px;" @click="today_orders">
                <div class="today_orders">
                    <span class="order_title">今日订单</span>
                    <span class="orders_all">查看全部 ></span>
                </div>
            </div>
        </div>
        <tabbar>
        </tabbar>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import tabbar from '../views/tabbar.vue'
import { useRouter } from 'vue-router';
import http from '@/http'
import { useUserStore } from '@/stores/counter';
const userStore = useUserStore();
const router = useRouter()
const occupancy = ref('')
const user_name = ref('')
const src = ref('')
const incom = ref('')
const allincome = ref('')
const nums = ref('')
const allnums = ref('')
const refund_amount = ref('')
const favorable_rate = ref('')
const await_complete = ref('')
const already_complete = ref('')
const already_evaluate = ref('')
const up_first_mouth = ref('')
const up_second_mouth = ref('')
const now_mouth = ref('')
const previous_first_mouth_nums = ref('')
const previous_first_mouth_earnings = ref('')
const previous_second_mouth_nums = ref('')
const previous_second_mouth_earnings = ref('')
const phone = userStore.phone


function getscore() {
    http.post('/escort/score/', {
            phone: phone,
    }).then(res => {
        console.log("<<<<<",res.data);
        favorable_rate.value = res.data.average_score
    }).catch(err => {
        console.log(err);
    })
}


function login() {
    http.get('/escort/searchescort/', {
        params: {
            phone: userStore.phone,
        }
    }).then(res => {
        user_name.value = res.data.escorts[0].e_name
        src.value = res.data.escorts[0].img
        occupancy.value = res.data.escorts[0].occupancy
        console.log(res.data);
        allorders()
    }).catch(err => {
        console.log(err)
    })
}

function allorders() {
    http.get('/escort/allorders/', {
        params: {
            name: user_name.value
        }
    }).then(res => {
        incom.value = res.data[0].prices
        allincome.value = res.data[0].all_prices
        nums.value = res.data[0].nums
        allnums.value = res.data[0].all_nums
        refund_amount.value = res.data[0].refund_amount
        await_complete.value = res.data[0].await_complete
        already_complete.value = res.data[0].already_complete
        already_evaluate.value = res.data[0].already_evaluate
        up_first_mouth.value = res.data[0].previous_first_year_mouth
        up_second_mouth.value = res.data[0].previous_second_year_mouth
        now_mouth.value = res.data[0].now_year_mouth
        previous_first_mouth_nums.value = res.data[0].previous_first_mouth_nums
        previous_first_mouth_earnings.value = res.data[0].previous_first_mouth_earnings
        previous_second_mouth_nums.value = res.data[0].previous_second_mouth_nums
        previous_second_mouth_earnings.value = res.data[0].previous_second_mouth_earnings
        console.log(res.data[0]);
    }).catch(err => {
        console.log(err)
    })
}

function today_orders() {
    router.push('/acceptorder')
}

function gotoorders() {
    router.push('/order_center')
}


function statistics() {
    console.log(user_name.value);
    router.push({
        path: '/statistics',
        query: {
            user_name: user_name.value,
            incoms: incom.value,
            nums: nums.value,
            previous_first_year_mouth: up_first_mouth.value,
            previous_second_year_mouth: up_second_mouth.value,
            now_year_mouth: now_mouth.value,
            previous_first_mouth_nums: previous_first_mouth_nums.value,
            previous_first_mouth_earnings: previous_first_mouth_earnings.value,
            previous_second_mouth_nums: previous_second_mouth_nums.value,
            previous_second_mouth_earnings: previous_second_mouth_earnings.value
        }
    })
}

onMounted(() => {
    login()
    getscore()
})
</script>
<style scoped>
.home {
    width: 100%;
    height: 100%;
}

.master_picture {
    width: 100%;
}

.title {
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    font-weight: bold;
    color: #313131;
}

.users_orders {
    width: 90%;
    margin-left: 5%;
}

.user {
    width: 100%;
    height: 70px;
    position: relative;
}

.user_img_box {
    width: 50px;
    height: 50px;
    clip-path: circle(50% at center);
    background-color: #f5f5f5;
    position: absolute;
    margin-top: 10px;
    display: inline-block;
}

.user_img {
    width: 50px;
    height: 50px;
    margin-left: 2.5%;
    border-radius: 50%;
    /* border-radius: 50%; */
}

.user_info {
    display: inline-block;
    margin-left: 60px;
}

.user_name {
    position: absolute;
    top: 15px;
    font-size: 16px;
    font-weight: bold;
    color: #383838;
}

.user_status {
    position: absolute;
    width: 50px;
    height: 18px;
    top: 40px;
    font-size: 12px;
    text-align: center;
    color: #4e4e4e;
    background-color: #eaeaea;
    border-radius: 25px;
}

.time {
    font-size: 14px;
    color: #767676;
}

.income_sales {
    margin-top: 20px;
    height: 70px;
    display: flex;
    justify-content: space-around;
    background-color: #0375fc;
    border-radius: 10px 10px 0 0;
    color: #ffffff;
    text-align: center;
}

.money_symbol {
    font-size: 14px;
}

.income {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.orders {
    margin-top: 15px;
}

.order_title {
    color: #313131;
    font-weight: bold;
}

.orders_all {
    position: absolute;
    right: 5%;
    color: #5e5e5e;
}

.order_data {
    height: 70px;
    display: flex;
    justify-content: space-around;
    background-color: #f7f7f7;
    border-radius: 10px;
    color: #000000;
    text-align: center;
    margin-top: 10px;
}

.today_orders {
    margin-top: 15px;
}
</style>